<template>
  <div id="stencil"></div>
</template>
<script>
import { Graph, Node, Path, Cell, Shape, Addon } from '@antv/x6'
export default {
  name: 'stencil',
  data() {
    return {
      visible: true
    }
  },
  mounted() {
    // 初始化 graph
    //this.initGraph()
  },
  methods: {
    initGraph(graph) {
      console.log('parent', this.$parent, 'graph', this.$parent.graph)
      //let graph = this.$parent.getGraph();
      console.log('graph is ', graph)
      // #region 初始化 stencil
      const stencil = new Addon.Stencil({
        title: '流程图',
        target: graph,
        stencilGraphWidth: 300,
        stencilGraphHeight: 300,
        collapsable: false,
        groups: [
          {
            title: '基础流程图',
            name: 'group1',
          }
        ],
        layoutOptions: {
          columns: 1,
          columnWidth: 200,
          rowHeight: 55,
        },
        getDragNode(node) {
          node.id = 'aaaa'
          console.log('drag node before',node)
          // 这里返回一个新的节点作为拖拽节点
          node = node.clone({ keepId: true })
          console.log('drag node after',node)
          return node
        },
        getDropNode(node) {
          console.log('drop node before 0',node)
          node.id = 'aaaa'
          console.log('drop node before',node)
          // 这里返回一个新的节点作为拖拽节点
          node = node.clone({ keepId: true })
      
          node.id='aaaa'
          console.log('drop node after',node)
          return node
        }
      })
      document.getElementById('stencil').appendChild(stencil.container)
      const r1 = graph.createNode({
        shape: 'start-event',
        label: '开始申请',
        data: {
          bpmnType: 'startEvent',
          label: '开始申请',
          initiator: 'applyUserId'
        },
        ports: {
          groups: {
            bottom: {
              position: 'bottom',
              attrs: {
                circle: {
                  r: 4,
                  magnet:
                    true,
                  stroke: '#C2C8D5',
                  strokeWidth: 1,
                  style: {
                    visibility: 'hidden',
                  },
                  fill: '#fff'
                }
              }
            }
          },
          items: [
            {
              group: 'bottom' // 指定分组名称
            }
          ]
        },
        attrs: {
          body: {
            rx: 20,
            ry: 26,
          },
        },
      })
      const r2 = graph.createNode({
        shape: 'user-task',
        data: {
          bpmnType: 'userTask',
          label: '审批任务',
          candidateGroups: '',
          assignee: ''
        },
        label: '审批任务',
      })
      const r3 = graph.createNode({
        shape: 'user-task',
        data: {
          bpmnType: 'exclusiveGateway',
          label: '网关'
        },
        ports: {
          groups: {
            top: {
              position: 'top',
              attrs:
              {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke:
                    '#C2C8D5',
                  strokeWidth: 1,
                  style: {
                    visibility: 'hidden',
                  },
                  fill: '#fff'
                }
              }
            },
            left: {
              position: 'left',
              attrs: {
                circle: {
                  r: 4,
                  magnet:
                    true,
                  stroke: '#C2C8D5',
                  strokeWidth: 1,
                  style: {
                    visibility: 'hidden',
                  },
                  fill: '#fff'
                }
              }
            },
            bottom: {
              position: 'bottom',
              attrs: {
                circle: {
                  r: 4,
                  magnet:
                    true,
                  stroke: '#C2C8D5',
                  strokeWidth: 1,
                  style: {
                    visibility: 'hidden',
                  },
                  fill: '#fff'
                }
              }
            }
          },
          items: [
            {
              group: 'top' // 指定分组名称
            },
            {
              group: 'left' // 指定分组名称
            },
            {
              group: 'bottom' // 指定分组名称
            }
          ]
        },
        attrs: {
          body: {
            rx: 6,
            ry: 6,
          },
        },
        label: '网关',
      })
      const r4 = graph.createNode({
        shape: 'end-event',
        label: '结束',
        data: {
          bpmnType: 'endEvent',
          label: '结束'
        },
        ports: {
          groups: {
            top: {
              position: 'top',
              attrs:
              {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke:
                    '#C2C8D5',
                  strokeWidth: 1,
                  style: {
                    visibility: 'hidden',
                  },
                  fill: '#fff'
                }
              }
            }
          },
          items: [
            {
              group: 'top' // 指定分组名称
            }
          ]
        },
        attrs: {
          body: {
            rx: 20,
            ry: 26,
          },
        },
      })
      stencil.load([r1, r2, r3, r4], 'group1')
    }
  }
}
</script>
<style>
#stencil {
  width: 300px;
  height: 100%;
  position: relative;
  background-color: #fff;
  border-right: 1px solid #dfe3e8;
  margin-left: 20px;
}

.x6-widget-stencil {
  background-color: #fff;
}

.x6-widget-stencil-title {
  background-color: #fff;
}

.x6-widget-stencil-group-title {
  background-color: #fff !important;
}
</style>
